<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Client Side Pagination in TreeGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination in TreeGrid</h2>
<p>This sample shows how to implement client side pagination in TreeGrid.</p>
<div style="margin:20px 0;"></div>
<table id="tg" title="Client Side Pagination" style="width:700px;height:250px"
       data-options="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				url: 'treegrid_data2.json',
				method: 'get',
				idField: 'id',
				treeField: 'name',
				pagination: true,
				pageSize: 2,
				pageList: [2,5,10]
			">
	<thead>
	<tr>
		<th data-options="field:'name',width:180">Task Name</th>
		<th data-options="field:'persons',width:60,align:'right'">Persons</th>
		<th data-options="field:'begin',width:80">Begin Date</th>
		<th data-options="field:'end',width:80">End Date</th>
		<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
	</tr>
	</thead>
</table>
<script type="text/javascript">
	(function ($) {
		function pagerFilter(data) {
			if ($.isArray(data)) {    // is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var target = this;
			var tg = $(target);
			var state = tg.data('treegrid');
			var opts = tg.treegrid('options');
			if (!state.allRows) {
				state.allRows = data.rows;
			}
			if (!opts.remoteSort && opts.sortName) {
				var names = opts.sortName.split(',');
				var orders = opts.sortOrder.split(',');
				state.allRows.sort(function (r1, r2) {
					var r = 0;
					for (var i = 0; i < names.length; i++) {
						var sn = names[i];
						var so = orders[i];
						var col = $(target).treegrid('getColumnOption', sn);
						var sortFunc = col.sorter || function (a, b) {
							return a == b ? 0 : (a > b ? 1 : -1);
						};
						r = sortFunc(r1[sn], r2[sn]) * (so == 'asc' ? 1 : -1);
						if (r != 0) {
							return r;
						}
					}
					return r;
				});
			}
			var topRows = [];
			var childRows = [];
			$.map(state.allRows, function (row) {
				row._parentId ? childRows.push(row) : topRows.push(row);
				row.children = null;
			});
			data.total = topRows.length;
			var pager = tg.treegrid('getPager');
			pager.pagination('refresh', {
				total: data.total,
				pageNumber: opts.pageNumber
			});
			opts.pageNumber = pager.pagination('options').pageNumber || 1;
			var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = topRows.slice(start, end).concat(childRows);
			return data;
		}

		var appendMethod = $.fn.treegrid.methods.append;
		var removeMethod = $.fn.treegrid.methods.remove;
		var loadDataMethod = $.fn.treegrid.methods.loadData;
		$.extend($.fn.treegrid.methods, {
			clientPaging: function (jq) {
				return jq.each(function () {
					var tg = $(this);
					var state = tg.data('treegrid');
					var opts = state.options;
					opts.loadFilter = pagerFilter;
					var onBeforeLoad = opts.onBeforeLoad;
					opts.onBeforeLoad = function (row, param) {
						state.allRows = null;
						return onBeforeLoad.call(this, row, param);
					}
					var pager = tg.treegrid('getPager');
					pager.pagination({
						onSelectPage: function (pageNum, pageSize) {
							opts.pageNumber = pageNum;
							opts.pageSize = pageSize;
							pager.pagination('refresh', {
								pageNumber: pageNum,
								pageSize: pageSize
							});
							tg.treegrid('loadData', state.allRows);
						}
					});
					tg.treegrid('loadData', state.data);
					if (opts.url) {
						tg.treegrid('reload');
					}
				});
			},
			loadData: function (jq, data) {
				jq.each(function () {
					$(this).data('treegrid').allRows = null;
				});
				return loadDataMethod.call($.fn.treegrid.methods, jq, data);
			},
			append: function (jq, param) {
				return jq.each(function () {
					var state = $(this).data('treegrid');
					if (state.options.loadFilter == pagerFilter) {
						$.map(param.data, function (row) {
							row._parentId = row._parentId || param.parent;
							state.allRows.push(row);
						});
						$(this).treegrid('loadData', state.allRows);
					} else {
						appendMethod.call($.fn.treegrid.methods, $(this), param);
					}
				})
			},
			remove: function (jq, id) {
				return jq.each(function () {
					if ($(this).treegrid('find', id)) {
						removeMethod.call($.fn.treegrid.methods, $(this), id);
					}
					var state = $(this).data('treegrid');
					if (state.options.loadFilter == pagerFilter) {
						for (var i = 0; i < state.allRows.length; i++) {
							if (state.allRows[i][state.options.idField] == id) {
								state.allRows.splice(i, 1);
								break;
							}
						}
						$(this).treegrid('loadData', state.allRows);
					}
				})
			},
			getAllRows: function (jq) {
				return jq.data('treegrid').allRows;
			}
		});

	})(jQuery);

	function formatProgress(value) {
		if (value) {
			var s = '<div style="width:100%;border:1px solid #ccc">' +
				'<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
			'</div>';
			return s;
		} else {
			return '';
		}
	}

	$(function () {
		$('#tg').treegrid().treegrid('clientPaging');
	})
</script>
</body>
</html>